let arr_register = [
  { uname: 'admin22', tel: 15122322202, pwd: '123456' }
];
// 表单效验
(function () {
  // 1. 发送短信验证码模块 -- 获取发送元素 -- 绑定点击事件
  const code = document.querySelector('.code')
  // 节流阀 -- 在倒计时期间，不能再次触发点击事件
  let flag = true
  code.addEventListener('click', function () {
    if (flag) {
      // 关闭节流阀，进入倒计时，此时不能再次触发点击事件
      flag = false
      // 1.1 实现到计时 
      let i = 5
      code.innerHTML = `0${i}秒后重新获取`
      // 倒计时 -- 间歇函数
      let timerId = setInterval(function () {
        i--
        code.innerHTML = `0${i}秒后重新获取`
        // 当倒计时时间为0，停止计时，
        if (i === 0) {
          clearInterval(timerId)
          code.innerHTML = `重新获取`
          // 打开节流阀 -- 倒计时结束之后可以再次点击
          flag = true
        }
      }, 1000)
    }
  })
  // 2、 表单验证
  // --change事件执行时间： 当input内容发生改变，失焦时触发
  // --input事件执行时间：当input内容发生改变，立刻触发
  // 2.1  验证用户名输入是否合法  
  const username = document.querySelector('[name = username]')
  username.addEventListener('change', verifyName)
  // 封装verifyName函数  -- 用户名校验
  function verifyName() {
    // 用户名判定规则
    const reg = /^[a-zA-Z0-9-_]{6,16}$/
    const span = username.nextElementSibling
    for (let i = 0; i < arr_register.length; i++) {
      if (arr_register[i] === username.value) {
        alert('用户名已被占用')
      }
    }
    // 如果填写信息不符合要求，提示不合法信息，返回false
    if (!reg.test(username.value.trim())) {
      span.innerHTML = '请输入6~16位英文数字下划线'
      return false
    }
    // 如果填写信息合法，什么都不显示，return true
    span.innerHTML = ''
    return true
  }
  // 2.2  验证手机号输入是否合法  
  const phone = document.querySelector('[name = phone]')
  phone.addEventListener('change', verifyPhone)
  // 封装verifyPhone函数  -- 手机号校验
  function verifyPhone() {
    //手机号判定规则
    const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
    const span = phone.nextElementSibling
    // 如果填写信息不符合要求，提示不合法信息，返回false
    if (!reg.test(phone.value)) {
      span.innerHTML = '请输入正确的手机格式'
      return false
    }
    // 如果填写信息合法，什么都不显示，return true
    span.innerHTML = ''
    return true
  }
  // 2.3  校验验证码输入是否合法  
  const msgcode = document.querySelector('[name = code]')
  msgcode.addEventListener('change', verifyCode)
  // 封装verifyCode函数  -- 密码校验
  function verifyCode() {
    //验证码判定规则
    const reg = /^\d{6}$/
    const span = msgcode.nextElementSibling
    // 如果填写信息不符合要求，提示不合法信息，返回false
    if (!reg.test(msgcode.value)) {
      span.innerHTML = '请输入6位正确验证码'
      return false
    }
    // 如果填写信息合法，什么都不显示，return true
    span.innerHTML = ''
    return true
  }
  // 2.4  密码输入是否合法
  const pwd = document.querySelector('[name = password]')
  pwd.addEventListener('change', verifyPwd)
  // 封装verifyPwd函数  -- 密码校验
  function verifyPwd() {
    //密码判定规则
    const reg = /^[a-zA-Z0-9-_]{6,20}$/
    const span = pwd.nextElementSibling
    // 如果填写信息不符合要求，提示不合法信息，返回false
    if (!reg.test(pwd.value)) {
      span.innerHTML = '请输入6~20位正确密码'
      return false
    }
    // 如果填写信息合法，什么都不显示，return true
    span.innerHTML = ''
    return true
  }


  // 2.5  再次输入密码是否和第一次密码相同
  const confirm = document.querySelector('[name = confirm]')
  confirm.addEventListener('change', verifyConfirm)
  // 封装verifyConfirm函数  -- 判断两次输入是否相同
  function verifyConfirm() {
    const span = confirm.nextElementSibling
    // 如果二次填写密码和第一次输入不一致，提示两次密码输入不一致，返回false
    if (confirm.value !== pwd.value) {
      span.innerHTML = '两次密码输入不一致!'
      return false
    }
    // 如果两次密码输入一致，什么都不显示，return true
    span.innerHTML = ''
    return true
  }

  // 2.6 已阅读并同意--获取确认按钮--添加点击事件--切换高亮样式
  // 获取确认按钮
  const agree = document.querySelector('#check')
  // 添加点击事件
  agree.addEventListener('click', function () {
    // console.log(agree);
    if (agree.checked) {
      // 切换选中样式
      document.querySelector('.check img').src = './images/checkbox-checked.webp'
      // console.log(agree.checked);
    } else {
      // 切换选中样式
      document.querySelector('.check img').src = './images/checkbox-unchecked.png'
      // console.log(agree.checked);
    }

  })

  // 获取头像 file
  const headpic = document.querySelector('#head_pic')
  headpic.addEventListener('change', function () {
    // console.log(headpic.value);
    // 截取头像图片名称  --- 拼接字符串完成图片替换
    let picname = (headpic.value).substring(12)
    // 将照片路径存在本地存储
    localStorage.setItem('pic',picname)
    const pic=localStorage.getItem('pic')
    // console.log(picname);
    localStorage.setItem('picname', picname)
    document.querySelector('.head_pic img').src = `./images/${pic}`
    // document.querySelector('.head_pic img').src = `.${headpic.value}`
  })


  // 3. 点击 注册 进行表单校验
  // 获取form 绑定表单提交事件
  const form = document.querySelector('.xtx-form')
  // 获取提交数据
  const items = document.querySelectorAll('.xtx-form [name]')
  form.addEventListener('submit', function (e) {
    e.preventDefault()
    // console.log(headpic.value);
    // 判断是否勾选用户协议 --判断 i标签是否存在类名icon-queren2 
    // classList.contains() 判断是否存在某个类名，返回true或false
    if (agree.checked === false) {
      alert('请同意用户协议')
    }
    if (headpic.value.length === 0) {
      alert('请上传头像')
      return
    }
    // console.log(headpic.value.length);
    const obj = {}
    // 非空效验 给对象内的属性赋值
    for (let i = 0; i < items.length; i++) {
      if (items[i].value.trim() === '') {
        alert('请填写完整数据')
        return
      }
      // 获取表单元素 name属性 作为对象的属性名称 items[i].name 
      // 将输入的值 items[i].value 赋值给相应属性
      obj[items[i].name] = items[i].value
    }
    // console.log(obj);
    // 3.2 收集用户输入信息，追加到数组中
    arr_register.push(obj)
    // 判断所有表单是否通过 设置开关变量flag
    let flag = true
    if (!verifyName()) { flag = false }
    if (!verifyPhone()) { flag = false }
    if (!verifyCode()) { flag = false }
    if (!verifyPwd()) { flag = false }
    if (!verifyConfirm()) { flag = false }
    if (agree.checked === false) { flag = false }
    if (headpic.value.length === 0) { flag = false }
    if (flag) {
      alert('注册成功，去登录！')
      localStorage.setItem('phone', phone.value)
      localStorage.setItem('pwd', pwd.value)
      localStorage.setItem('username',username.value)
      // console.log(phone.value,pwd.value);
      location.href = './index.html'
      let pic = localStorage.getItem('picname')
      console.log(pic);
      // 清除表单
      form.reset()
    }

  })
}());